import React, { useEffect, useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
  const [age, setAge] = useState(18)
  useEffect(() => {
    // 这儿的代码只希望 count 变化的适合才执行
    // 问题：age 变化这儿也走了，性能不好
    console.log(1)
    document.title = count
  }, [count]) // 第二个参数可以写一个数组，数组里面的内容称为依赖项，表示数组里面的状态/依赖项变化的适合才执行副作用处理函数/effect回调
  // 初始化会走 => componentDidMount
  // count 状态变化会走
  return (
    <div>
      <h3>count: {count}</h3>
      <h3>age: {age}</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setAge(age + 1)}>+1</button>
    </div>
  )
}
